<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->
<script type="text/javascript" src="../../libs/js/graphical/raphael.js"></script>
<script type="text/javascript" src="../../libs/js/graphical/svgmap.js"></script>
<script type="text/javascript" src="../../libs/js/graphical/map_data/china/province/sichuan.js"></script>

<style type="text/css">
			.demo {
				width: 760px;
				height: 520px;
				margin: 40px auto 0 auto;
				font-size: 14px;
			}
			#map {
				width: 600px;
				margin: 10px auto
			}




			.mapTip{
				display:none; 
				position:absolute; 
				padding:8px; 
				border: 1px solid #c4d0df;
				background: #f7f8fa;
				box-shadow: 0 0 6px 1px rgba(0,0,0,.08);
				border-radius: 5px;
				}

			.mapTip .arrow,
			.mapTip .arrowMask{ 
				position: absolute; 
				width: 0; 
				height: 0; 
				border-color: transparent; 
				border-style: solid;
			}
			.mapTip .arrow{ 
				bottom: -7px; 
				left: 50%; 
				margin-left: -7px; 
				border-width: 7px; 
				border-top-color: #c4d0df; 
				border-bottom-width: 0;
			}
			.mapTip .arrowMask{
				bottom: 1px; 
				border-width: 6px; 
				margin-left: -6px; 
				border-top-color: #f7f8fa; 
				border-bottom-width: 0;
			}

		</style>
	</head>
	<body>
<div class="page_content">	
	<div class="groupTitle"><span>示例说明</span></div>
可以创建全国344个区县的地图，可以自定义地图尺寸、鼠标移入提示和点击事件。这里以四川省为例展示。
		<div class="demo">
			<div id="SvgMap"></div>
		</div>
</div>		
		<script type="text/javascript">
			var mapRegion;
			$(function(){

	  			mapRegion = $('#SvgMap').SVGMap({
	            mapName: 'sichuan',
	            mapWidth: 600,
	            mapHeight: 600,
	            showName: true,
	            showCapital: true,
	            stateCursor: 'pointer',
	            showTip:true,
	            mapTipHtml: function(stateData, obj){
			        return 'id:' + ((stateData)[obj.id] && (stateData)[obj.id].baifenbi || obj.id) + '<br>name:' + obj.name;
			    },
			    clickCallback: function(stateData, obj){
			        top.Toast("showNoticeToast",'点击了：'+obj.name);
			    }

        	});
            
		});


		</script>
	</body>
</html>